{% extends 'admin/common/base.html' %}

{% block title %}分类管理-青灯小站{% endblock %}

{% block main_title %}分类管理{% endblock %}

{% block content %}
    <div class="layui-container">
        <button type="button" class="layui-btn" lay-on="prompt">新增分类</button>
        <table class="layui-hide" id="ID-table-demo-data"></table>
    </div>
{% endblock %}


{#  js站位坑  #}
{% block script %}
    <script>
        layui.use('table', function () {
            var table = layui.table;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;
            util.on('lay-on', {
                    alert: () => {
                        layer.alert('对话框内容');
                    }, prompt: function () {
                        layer.prompt({title: '新增分类'}, (value, index, elem) => {
                            if (value != '') {
                                console.log('发送请求');
                                layer.close(index);
                                $.post('{{ url_for("admin.category_add") }}', {value: value}, (res) => {
                                    res === 'success' ? location.reload() : layer.msg('分类已经存在', {
                                        icon: 7,
                                        time: 1500,
                                        anim: 6
                                    });
                                })
                            } else {
                                layer.msg('请输入分类名称', {icon: 7, time: 1500, anim: 6});
                            }
                        });
                    }
                }
            );
            // 已知数据渲染
            var inst = table.render({
                elem: '#ID-table-demo-data',
                url: '{{ url_for('admin.category_query') }}',
                cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 180, sort: true},
                    {field: 'name', title: '分类名称', width: ''},
                    {field: 'add_time', title: '添加时间', width: 280},
                    {field: 'update_time', title: '修改时间', width: 280},
                ]],
                // 在此获取数据渲染
                data: '{{ data }}',
                //skin: 'line', // 表格风格
                //even: true,
                page: true, // 是否显示分页
                limits: [5, 10, 15],
                limit: 5 // 每页默认显示的数量
            });
        });
    </script>
{% endblock %}